<template>
  <!-- 弹窗中的 温度监控 -->
  <div class="tempMonitor">
    <div class="selectTime">
      <div v-if="oddEven === 1" class="pickTime singPicktime">
        <el-date-picker
          v-model="dayTime"
          type="date"
          size="small"
          value-format="timestamp"
          :picker-options="pickerOptions0"
          :clearable="false"
        >
        </el-date-picker>
      </div>
      <div v-if="oddEven === 0" class="pickTime2">
          <date-range-picker
          @passDate="passTmpDate" 
          :startTime="new Date().toLocaleDateString()" 
          :endTime="new Date().toLocaleDateString()" />
      </div>
    </div>  
    <div id="tempChart"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as api from '@/api'
import { ONE_DAY_MS } from '@/consts/consts'
import { chartTemp } from '@/consts/chartTemp'
import { chartTempFridge } from '@/consts/chartTempFridge'
import { dayStartTime, dayEndTime } from '@/utils/timeUtil'
let myChart = null
export default {
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      dayTime: dayStartTime(new Date().getTime()),
      chartData: [],
      queryObj: {
        time_start: dayStartTime(new Date().getTime()),
        time_end: dayEndTime(new Date().getTime())
      },
      isOneDay: false,
      showModeTip: true,
      legendSelected: {},
    }
  },
  watch: {
    queryObj(val) {
      this.chartData = []
      this.equipmentInfoData()
    }
  },
  computed: {
    ...mapState(['deviceDetail','oddEven'])
  },
  methods: {
     // 时间筛选
    passTmpDate (v) {
      console.log('passTmpDate:', v)
      this.isOneDay = v[1] - v[0] <= ONE_DAY_MS
      console.log('isOneDay:::',this.isOneDay)
      this.queryObj.time_start = v[0]
      this.queryObj.time_end = v[1]
      this.equipmentInfoData()
    },
    draw() {
      let fn = this.deviceDetail.device_type == '7004' ? chartTemp : chartTempFridge
      myChart = this.$echarts.init(document.getElementById('tempChart'))
      
      const opt = fn(
        this.chartData,
        this.queryObj.time_start,
        this.queryObj.time_end,
        this.isOneDay,
        this.showModeTip,
        this.deviceDetail.device_type,
      )
      myChart.setOption(opt)
      myChart.on('legendselectchanged', this.changeLegendSelect)
      myChart.resize()
    },

    changeLegendSelect (p) {
      let s = []
      for (let k in p.selected) {
        s.push(p.selected[k])
        this.legendSelected[k] = p.selected[k]
      }
      this.showModeTip = s.indexOf(true) >= 0
    },

    // 图表数据
    async equipmentInfoData() {
      const { code, data } = await api.core.equipmentInfoData({
        offset: 0,
        limit: -1
      }, {
        device_type: this.deviceDetail.device_type,
        hub_id: this.$route.query.branch_number,
        serial: this.deviceDetail.serial,
        time_start:  this.queryObj.time_start,
        time_end: this.queryObj.time_end,
        desc: 1
      })
      if (code === 0) {
        this.chartData = data.map(item => {
          item.data = typeof item.data === 'string' ? JSON.parse(item.data) : item.data
            return item
        })
        // let isAir=this.chartData.length>0&&this.chartData[0].data.setTem? true:false
        this.draw()
      }
    }
  },
  created () {
    this.isOneDay = this.queryObj.time_end - this.queryObj.time_start <= ONE_DAY_MS
    console.log('默认时间',this.queryObj)
    this.equipmentInfoData()
  },
  mounted () {
    
  },
}
</script>

<style lang="stylus">
.tempMonitor {
  position: relative;
  .selectTime {
    position:absolute;
    left: getPx(100);
    z-index: 55
    .pickTime {
      width:160px;
    }
    .pickTime2 {
      width:260px;
    }
  }
  #tempChart {
    height: getPx(500);
    width:100%;
  }
  @media screen and (max-height:$h){
    #tempChart {
      height: getPx(410);
      width:100%;
      // width: getPx()
    }
  }
}
</style>